@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: {!! $lists !!},
                    finished: false,//是否已加载完成，加载完成后不再触发load事件
                    loading: false,//加载loading开关
                    params: {page : 2, id : "{{$id}}"},
                    title: '专栏',
                }
            },
            created(){
                this.listData = this.pageData.data;
            },
            methods: {
                list() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.column.info') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            if((that.pageData.last_page == 1) || (that.params.page == that.pageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
                info(id) {
                    window.location.href = "{{ route('wap.new.info') }}"+'?id='+id;
                },
                onClickLeft() {
                    window.location.href = "{{ route('wap.column.index') }}";
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main column-info" style="background: #fff">
        <div class="row">
            <div id="app" v-cloak>
                <van-nav-bar
                        :title="title"
                        left-text=""
                        border
                        fixed="true"
                        left-arrow="false"
                        @click-left="onClickLeft">
                    <van-icon name="arrow-left" slot="left"/>
                </van-nav-bar>
                <div class="col-xs-12">
                    <div class="column-info-user">
                        <div class="column-info-head"></div>
                        <div style="position: relative;bottom: 6rem">
                            <div class="info-author-avatar">
                                <img src="{{ asset('img/555.png') }}" alt="">
                            </div>
                            <div class="info-author-go">
                                <p class="info-author-name"> {{ $info['truename'] }}</p>
                                <p class="info-author-number">
                                <table>
                                    <tr>
                                        <td>{{ $info['total_news'] }}</td><td>{{ $info['total_views'] }}</td>
                                    </tr>
                                    <tr style="color: #999">
                                        <td>文章数</td><td>浏览量</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 column-info-tab">
                    <ul>
                        <li><a class="active" href="javascript:void(0)">文章 <em>{{ $info['total_news'] }}</em></a></li>
                    </ul>
                </div>
                <van-list style="padding-top: 1rem"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="list">
                    <div class="col-xs-12" v-for="items in listData"  @click="info(items.id)">
                        <div class="main-item">
                            <div class="main-item-img">
                                <span class="tag-name" v-if="items.cate_child">@{{ items.cate_child.name }}</span>
                                <span class="tag-name none" v-else></span>
                                <img :src="items.thumb">
                            </div>
                            <div class="main-item-info">
                                <p class="info-title">@{{ items.title }}</p>
                                <p class="info-other">
                                    <img :src="items.user.avatar">
                                    <span class="info-other-name">
                                        @{{ moment(items.created_at).format('YYYY-MM-DD') }}<i></i>
                                    </span>
                                    <span class="info-other-view"><i class="fa fa-eye"></i> @{{ items.view }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
@endsection

